<template>
	<view>
		<view class="imgvideo">
			<text :class="{video_title : isimg}" @click="totaggle(0)">出库报表</text>
			<text :class="{video_title : !isimg}" @click="totaggle(1)">入库报表</text>
		</view>
		<view class="u-flex u-row-between title_top u-border-bottom" v-if="showEmpty==false">
			<view>总计</view>
			<view>
				<text>总库存：{{alltotal.num}}件</text>
				<text style="margin-left:20rpx;">总金额：￥{{alltotal.price}}</text>
			</view>
		</view>
		<view v-for="(item,index) in allList" :key="index">
			<view class="u-flex u-row-between title_top" style="background-color: #fff;margin-bottom:10rpx;">
				<view class="list_title" @click="toopen(item.isopen,index)">
					<text class="u-margin-right-15">{{item.time}}</text>
					<u-icon name="arrow-down" color="#555" size="32"></u-icon>
				</view>
				<view>
					<text>库存：{{item.liststore.length}}件</text>
					<!-- <text style="margin-left:20rpx;">金额：￥{{alltotal.price}}</text> -->
				</view>
			</view>
			<view v-if="item.isopen"  class="u-padding-20" style="background-color: #fff;">
				<view v-for="(item1,index1) in item.liststore" :key="index1" class="u-flex u-row-between u-border-bottom u-padding-bottom-20 u-padding-top-20" >
					<image class="img_con" :src="item1.image"></image>
					<view class="" style="width:72%">
						<view class="u-flex u-row-between list_con1">
							<text>{{item1.name}}</text>
							<text>￥{{item1.unit}}</text>
						</view>
						<view class="u-flex u-row-between list_con1 list_con2">
							<text>五金工具类</text>
							<text>× {{item1.num}}</text>
						</view>
						<view class="u-flex u-row-between list_con1 list_con2">
							<!-- <text v-if="!isimg">类型：{{item.type}}</text> -->
							<text v-if="item1.type==0" style="color:#008987;">采购</text>
							<text v-if="item1.type==1" style="color:#0f0;">领用</text>
							<text v-if="item1.type==2" style="color:#ff0;">借用</text>
							<text v-if="item1.type==3" style="color:orange;">归还</text>
							<text>{{item1.time}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-empty :show="showEmpty" text="暂无数据" mode="list">
		</u-empty>
		<u-picker mode="time" v-model="show" :params="params" @confirm="confirm"></u-picker>
	</view>
</template>

<script>
	import {
		getAssetsReport
	} from "@/service/assetService.js";
	export default {
		data () {
			return {
				isimg:true,
				type:0,
				show:true,
				time:'',
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				alltotal:{},
				allList:[],
				showEmpty:false,
			}
		},
		onLoad() {
			getAssetsReport({type:0}).then(this.getAssetsReport)
		},
		methods:{
			getAssetsReport(e){
				if(e.code==200){
					this.showEmpty=false
					this.alltotal=e.result.total;
					for(var key in e.result.list) {
						var detail={time:key,isopen:false,liststore:e.result.list[key]}
						this.allList.push(detail)
					}
					// console.log(this.allList);
				}else{
					this.showEmpty=true
					this.this.allList=[];
				}
			},
			
			totaggle:function(num){
				this.allList=[];
				this.type=num;
				if(num==0){
					this.isimg=true
				}else{
					this.isimg=false
				}
				
				getAssetsReport({type:num}).then(this.getAssetsReport)
			},
			toopen(open,index){
				this.allList[index].isopen=!open;
				console.log(this.allList[index].liststore);
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f5f5f5;
	}
	.imgvideo{
		display: block;
		width:95%;
		margin:30rpx auto;
		border:1rpx solid #008987;
		border-radius: 30rpx;
		overflow: hidden;
		text{
			display: inline-block;
			height:60rpx;
			width:50%;
			color:#008987;
			text-align: center;
			line-height: 60rpx;
		}
		.video_title{
			color:#fff;
			background-color: #008987;
		}
	}
	.title_top{
		margin-top:20rpx;
		margin-bottom: 3rpx;
		padding: 20rpx;
		background-color: #fff;
	}
	.list_title{
		background-color: #eee;
		border-radius: 10rpx;
		padding:20rpx;
	}
	.img_con{
		width:25%;
		height:180rpx;
		border-radius: 10rpx;
	}
	.list_con1{
		padding:10rpx 0;
	}
	.list_con2{
		font-size: 28rpx;
		color:#666;
	}
</style>